<template>
  <view class="card-inner tn-m-xs  
">
    <!-- 新增的外层 view -->
    <view class="custom-card tn-p-lg tn-shadow tn-radius">
      <view class="tn-flex tn-align-center justify-between">
        <view @click="change(0)" class="tn-flex tn-text-center">
          <text>日账单</text>
        </view>
        <view @click="change(1)" class="tn-flex tn-text-center">
          <text>月账单</text>
        </view>
        <view class="tn-flex tn-text-right">
          <text class="tn-text-xs">{{ carPark.name }}</text>
        </view>
      </view>
      <view class="tn-flex justify-between tn-mt-lg tn-ml-sm">
      <view class="tn-flex" @click="openDatePicker">
        <text v-if="billsType === 0">{{ carPark.dateData.year+'年'+carPark.dateData.month+'月'+carPark.dateData.day+'日'}}</text>
        <text v-else>{{ carPark.dateData.year+'年'+carPark.dateData.month+'月'}}</text>
        <tn-icon name="down" />
      </view>
        <view class="tn-flex tn-text-right">
          <tn-button type="success" shape="round" @click="flush">刷新</tn-button>
        </view>
      </view>
      <view class="tn-flex justify-between tn-mt-lg tn-ml tn-pl-xl">
        <view class=" tn-flex-column ">
            <view class="tn-flex tn-text-right">
              <text>收费{{ carPark.dailyIncomeStatistics.payCounts }}笔,合计</text>
            </view>
            <view class="tn-flex tn-text-right">
              <text class="tn-text-2xl tn-text-bold">￥{{ carPark.dailyIncomeStatistics.amountActuallyPaid }}</text>
            </view>
        </view  >
        
      </view>
    </view>
	<!-- 日期选择器 -->
	  <tn-date-time-picker v-model="dateTimeValue" v-model:open="showDate"  :mode="billsType==0?'date':'yearmonth'" @confirm="confirmDate"/>
  </view>
</template>
 

<script setup lang="ts">
import {defineProps, defineEmits, ref} from "vue";
import dayjs from "dayjs";
// 事件传递
const emit = defineEmits(['change','changeDate']);
const props = defineProps({
  billsType: {
    required: false, // 是否必传
    type: Number, // 类型
    default: 0, // 默认值Number,
  },
  dateStr:String,
  carPark: {
    id: 0,
    name: '',
    dailyIncomeStatistics:
    {
      amountActuallyPaid: 0,
      amountsPayable: 0,
      countsTime: 0,
      date: 0,
      endTime: 0,
      goodsType: 0,
      id: 0,
      month: 10,
      payCounts: 0,
      paymentAgencyShortName: "",
      refundAmount: 0,
      shopId: 0,
      shopName: "",
      startTime: 0,
      title: "",
      year: 0
    },
    dateData: {
      year: 0,
      month: 0,
      day: 0
    }
  },
});

const change = (index: number) => {
  emit("change", index);
};
const flush = (e: any) => {
  emit('flushData', e);
};
const showDate = ref(false);
const dateTimeValue = ref();
const openDatePicker = ()=>{
	showDate.value = true
};

const closeDatePicker = ()=>{
	showDate.value = false
	 
}; 

const confirmDate = (value:String)=>{
	emit('confirmDate',value)
}
</script>

<style lang="scss" scoped>
.custom-card {
  background: linear-gradient(to bottom, #aaebf3 15%, #8fbbfd) !important;
}
</style>
